<script setup>
import { ref } from "vue";
import { useRoute } from "vue-router";
import { getSearchList } from "../../apis/music";
import { createWindow } from "../../utils/ipcRenderer";

const route = useRoute();
const loading = ref(false);
const albumList = ref([]);
const count = ref();
const currentPage = ref(1);
const getInit = async (page) => {
  loading.value = true;
  let res2 = await getSearchList(
    route.params.keyword,
    30,
    (page - 1) * 20,
    1000
  );
  currentPage.value = page;
  albumList.value = res2.result.playlists;
  count.value = res2.result.playlistCount;
  loading.value = false;
};
getInit(1);

const handleClick = (id) => {
  createWindow({
    windowName: "songListDetail",
    path: "songListDetail",
    width: 1200,
    height: 820,
    param: { id: id },
  });
};
</script>
<template>
  <div v-loading="loading" class="all_wrap">
    <el-scrollbar heigt="100%">
      <div v-if="albumList" class="song_list">
        <div class="title">搜索 歌单 "{{ route.params.keyword }}"</div>
        <div class="created_list">
          <div class="list_wrap">
            <div
              class="item_wrap"
              v-for="(item, index) in albumList"
              :key="index"
            >
              <div class="item">
                <div @click="handleClick(item.id)" class="cover">
                  <el-image lazy :src="item.coverImgUrl+`${'?param=300y300'}`" fit="cover">
                    <template #placeholder>
                      <div class="image-slot">
                        Loading<span class="dot">...</span>
                      </div>
                    </template>
                  </el-image>
                </div>
                <div class="name">{{ item.name }}</div>
                <div class="song_count">{{ item.trackCount }}首</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="Math.ceil(count / 15) * 10"
          :pager-count="7"
          @current-change="getInit"
          :current-page.sync="currentPage"
        >
        </el-pagination>
      </div>
    </el-scrollbar>
  </div>
</template>

<style lang="scss" scoped>
.all_wrap {
  height: 100%;
  .song_list {
    height: 100%;
    .title {
      font-size: 30px;
      height: 40px;
      line-height: 40px;
      margin-bottom: 40px;
      font-weight: 600;
    }
  }

  .created_list {
    .list_wrap {
      flex-wrap: wrap;
      display: grid;
      justify-content: space-around;
      align-content: center;
      grid-template-columns: repeat(auto-fill, 16vw);
      .item_wrap {
        .item {
          // width: 12.5rem;
          //   height: 15.625rem;
          position: relative;
          .cover {
            width: 15vw;
            height: 15vw;

            .el-image {
              width: 100%;
              height: 100%;
              border-radius: 6px;
              box-shadow: 0px 2px 12px 0 rgba(0, 0, 0, 0.2);
            }
            img {
              transition: 2s;
            }
          }
          .count {
            position: absolute;
            top: 2%;
            right: 6%;
            font-size: 10px;
            color: #fff;
            .iconfont {
              font-size: 14px;
              margin-right: 3px;
            }
          }
          .name {
            width: 200px;
            color: #373737;
            font-size: 14px;
            line-height: 35px;
            font-weight: 600;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .song_count {
            font-size: 12px;
            color: #9f9f9f;
          }
        }
      }
    }
  }
}
</style>
